<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>解决拉伸问题</title>
  <link rel="icon" href="https://img.kaikeba.com/kkb_portal_icon.ico">
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }

    #canvas {
      background-color: antiquewhite;
    }
  </style>
</head>

<body>
  <canvas id="canvas"></canvas>
  <!-- 顶点着色器 -->
  <script id="vertexShader" type="x-shader/x-vertex">
      attribute vec4 a_Position;
      uniform mat4 u_ProjectionMatrix;
      void main(){
        gl_Position = u_ProjectionMatrix*a_Position;
      }
  </script>
  <!-- 片元着色器 -->
  <script id="fragmentShader" type="x-shader/x-fragment">
      precision mediump float;
      uniform vec4 u_Color;
      void main(){
        gl_FragColor=u_Color;
      }
  </script>
  <script type="module">
    import { initShaders } from '../jsm/Utils.js';
    import { Matrix4, Vector3, Quaternion, Object3D, OrthographicCamera } from 'https://unpkg.com/three/build/three.module.js';
    import Poly from './jsm/Poly.js'

    const canvas = document.getElementById('canvas');
    const [viewW, viewH] = [window.innerWidth, window.innerHeight]
    canvas.width = viewW;
    canvas.height = viewH;
    const gl = canvas.getContext('webgl');

    const vsSource = document.getElementById('vertexShader').innerText;
    const fsSource = document.getElementById('fragmentShader').innerText;
    initShaders(gl, vsSource, fsSource);
    gl.clearColor(0.0, 0.0, 0.0, 1.0);

    //正交投影矩阵
    const projectionMatrix = new Matrix4()
    //定义相机世界高度尺寸的一半
    const halfH = 2
    //计算画布的宽高比
    const ratio = canvas.width / canvas.height
    //基于halfH和画布宽高比计算相机世界宽度尺寸的一半
    const halfW = halfH * ratio
    //定义相机世界的6个边界
    const [left, right, top, bottom, near, far] = [
      -halfW, halfW, halfH, -halfH, 0, 4
    ]
    //获取正交投影矩阵
    projectionMatrix.makeOrthographic(left, right, top, bottom, near, far)


    const triangle = new Poly({
      gl,
      source: [
        0, 0.3, -0.2,
        - 0.3, -0.3, -0.2,
        0.3, -0.3, -0.2
      ],
      type: 'TRIANGLES',
      attributes: {
        a_Position: {
          size: 3,
          index: 0
        },
      },
      uniforms: {
        u_Color: {
          type: 'uniform4fv',
          value: [1, 1, 0, 1]
        },
        u_ProjectionMatrix: {
          type: 'uniformMatrix4fv',
          value: projectionMatrix.elements
        },
      }
    })

    render()

    function render() {
      gl.clear(gl.COLOR_BUFFER_BIT);
      triangle.draw()
    }
  </script>
</body>

</html>